<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<link href="css/mui.picker.css" rel="stylesheet" />
		<link href="css/mui.poppicker.css" rel="stylesheet" />
		<style type="text/css">
			form .mui-table-view-cell:after {
				height: 0;
				left: 0;
			}
			
			.mui-btn-block {
				font-weight: bold;
			}
			
			.mui-input-group{
				padding: 10px 0 5px;
			}
			
			.mui-input-group .mui-input-row.amount {
				height: 55px;
			}
			
			.mui-input-row.amount label {
				width: auto;
				float: none;
				font-size: 30px;
				padding: 0px 10px 11px 15px;
				vertical-align: top;
			}
			
			.mui-input-row.amount label~input {
				width: 80%;
				height: 50px;
				float: none;
				padding: 0;
				font-size: 40px;
				line-height: 1em;
				border-bottom: solid 1px #eee;
			}
			
			.mui-input-group .mui-input-row:after {
				height: 0;
			}
			
			.info {
				margin-left: 60px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a id="list" class="mui-icon iconfont icon-list mui-pull-right"></a>
			<h1 class="mui-title">刷卡取现</h1>
		</header>
		<div class="mui-content">
			<div class="mui-table-view mui-panel">
				<form class="mui-input-group">					
					<div class="mui-table-view-cell" style="padding: 20px 15px;">
						取现金额
					</div>
					<div class="mui-input-row amount">
						<label>￥</label>
						<input type="number" id="Amount" class="mui-input-clear" maxlength="30" placeholder="0.00">
					</div>
					<div class="mui-input-row info" style="padding-top: 5px;">
						<p id="boxInfo">费率<span id="txtFeeRate">0</span>%+<span id="txtFeeFixed">0</span>元，手续费 <span id="boxTip">0.00</span> 元</p>						
					</div>
				</form>
			</div>
			<div class="mui-table-view mui-panel">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>取现信用卡</label>
						<input id='ccBankCard' type="text" class="mui-input-clear mui-input" placeholder="请选择取现信用卡">
					</div>
					<div class="mui-input-row">
						<label>收款储蓄卡</label>
						<input id='dcBankCard' type="text" class="mui-input-clear mui-input" placeholder="请选择收款储蓄卡">
					</div>
				</form>
			</div>
			<div class="mui-content-padded">
				<button type="button" id="submit" class="mui-btn mui-btn-danger mui-btn-block">确认取现</button>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.picker.js"></script>
		<script src="js/mui.poppicker.js"></script>
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/data.bank.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var feeRate = 0, feeFixed = 0, outAmount = 0;						
			var $Info = document.getElementById("boxInfo");
			var $Tip = document.getElementById("boxTip");
			var $Amount = document.getElementById("Amount");
			var $BankCard = document.getElementById("ccBankCard");
			var $BankCardDC = document.getElementById("dcBankCard");
			var $txtFeeRate = $id("txtFeeRate");
			var pickerCC = new mui.PopPicker();
			var pickerDC = new mui.PopPicker();
			var dataCard, dataCardDC;
			var availableAmount = 0;
			var asset;
			
			mui.init();
			
			function setAmount(amount) {
				var num = amount*1;
				outAmount=num;
				if(num > 0){
					var fee = ((num*feeRate) + feeFixed).toFixed(2);
					$Tip.style.display = "inline";
					$Tip.innerText = fee;
					if(num == availableAmount){
						$Amount.value = num - fee * 1;
					}
				}
				else
				{
					$Info.style.display = "inline";
					//$Tip.style.display = "none";
					$Tip.innerText = "0.00";
				}
			}
			
			document.getElementById("Amount").addEventListener('input', function(){
				setAmount($Amount.value);
			});
						
			document.getElementById("list").addEventListener('tap', function(){
				mui.openWindow("account-out-list.html", "account-out-list");
			});
			
			document.getElementById("submit").addEventListener('tap', function(){					
				var bandcard = $BankCard.getAttribute("data-id") || "";
				var bandcardDC = $BankCardDC.getAttribute("data-id") || "";
				var amount = outAmount;
				
				if(bandcardDC == "" || bandcard == "" || amount == "" || amount == 0){
					mui.toast("请输入");
					return false;
				}
				
				mui.showLoading();
				app.post("GetCash", {Amount:amount, CCID:bandcard, DCID:bandcardDC}, function(data){
					if(data.isSuccess) {
						$id("Amount").value = "";
						$Tip.innerText = "0.00";
						mui.toast("提现成功");
						mui.openWindow({url:"getcash-add-item.html", id:"getcash-add-item.html", extras:{data:data.data}});
					} else {
						mui.alert(data.message);
					}
				});
			});
			
			$BankCard.addEventListener('tap', function(event) {
				pickerCC.show(function(items) {
					if(items[0].value == 0){
						mui.openWindow("bankcard-add.html?p=1&t=0", "bankcard-add.html");
					}
					else{
						setBankCard(items[0].text, items[0].value);
						
						app.updateSettings("DefaultBankCardCC", items[0]);
					}
				});
			}, false);
						
			$BankCardDC.addEventListener('tap', function(event) {
				pickerDC.show(function(items) {
					if(items[0].value == 0){
						mui.openWindow("bankcard-add.html?p=1&t=1", "bankcard-add.html");
					}
					else{
						setBankCardDC(items[0].text, items[0].value);
						
						app.updateSettings("DefaultBankCardDC", items[0]);
					}
				});
			}, false);
			
			setBankCard = function(text, value){
				$BankCard.value = text;
				$BankCard.setAttribute("data-id", value);
			}
			
			setBankCardDC = function(text, value){
				$BankCardDC.value = text;
				$BankCardDC.setAttribute("data-id", value);
			}
			
			buildBankCard = function(){
				dataCard = app.getBankCardSelect(0);
				pickerCC.setData(dataCard);
				
				dataCardDC = app.getBankCardSelect(1);
				pickerDC.setData(dataCardDC);
			}
			
			init = function(){		
				buildBankCard();
				
				var settings = app.getSettings();
				if(settings.DefaultBankCardCC){
					setBankCard(settings.DefaultBankCardCC.text, settings.DefaultBankCardCC.value);
				}
				if(settings.DefaultBankCardDC){
					setBankCardDC(settings.DefaultBankCardDC.text, settings.DefaultBankCardDC.value);
				}
				
				feeRate = settings.Recharge.RechargeFee;
				feeFixed = settings.GetCash.GetCashFee;
				$txtFeeRate.innerText = (feeRate * 100).toFixed(2);
				$id("txtFeeFixed").innerText = feeFixed;
			};			
			
			mui.plusReady(function () {
				init();
				
			});
			
		</script>
	</body>

</html>